<template>
  <SxDialog
    :title="uploadConfig.title ? uploadConfig.title : dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="uploadConfig.visible"
    @dialog-close="handleAddCancel"
    @dialog-cancel="handleAddCancel"
    @dialog-confirm="handleAddConfirm"
  >
    <el-upload
      ref="upload"
      :limit="1"
      accept=".xlsx, .xls"
      :headers="headers"
      :action="process + uploadConfig.url + '?updateSupport=' + uploadConfig.updateSupport"
      :disabled="uploadConfig.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip text-center" slot="tip">
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="uploadConfig.updateSupport" />
          {{uploadConfig.updateSupportText}}
        </div>
        <span>仅允许导入xls、xlsx格式文件。</span>
        <el-link
          type="primary"
          :underline="false"
          style="font-size:12px;vertical-align: baseline;"
          @click="importTemplate"
        >下载模板</el-link>
      </div>
    </el-upload>
  </SxDialog>
</template>

<script>
import SxDialog from "@Components/Dialog";
import { getToken } from "@/utils/auth";
export default {
  components: {
    SxDialog
  },
  props: {
    uploadConfig: {
      type: Object,
      default: () => ({
        title: "",
        // 是否显示
        visible: false,
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 是否更新已经存在的数据 描述
        updateSupportText: "是否更新已经存在的数据",
        // 上传的地址
        url: "system/user/importData",
        //下载模板名字
        importTemplateName: "user_template",
        //下载模板地址
        importTemplateUrl: "system/user/importTemplate"
      })
    }
  },
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      dialog: {
        title: "导入",
        rules: {},
        width: "600px",
        height: "300px"
      },
      process: `${process.env.VUE_APP_BASE_API}/`
    };
  },
  methods: {
    // 关闭弹窗
    handleAddCancel() {
      this.uploadConfig.visible = false;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        this.uploadConfig.importTemplateUrl,
        {},
        `${this.uploadConfig.importTemplateName}${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.uploadConfig.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.dialog.visible = false;
      this.uploadConfig.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.$emit('handleFileSuccess')
    },
    // 导入模板
    handleAddConfirm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style lang="scss">
.el-upload{
  width: 100% !important;
}
.el-upload-dragger{
  width: 100% !important;
}
</style>

